<template>
  <div class="page-container">
    <ex_super_table_page v-bind="option" ref="SuperTablePage" @selection-change="e => selection = e">
    </ex_super_table_page>

    <pms_customer_warehouse_price_version ref="pmsWarehousePriceDialog"></pms_customer_warehouse_price_version>

    <el-dialog
        title="有效期设置"
        :visible.sync="effectiveDialogVisible"
        width="600px"
    >
      <el-form labelWidth="120px" label-position="left" style="padding-top: 20px;" ref="refForm">
        <el-row>
          <el-col>
            <el-form-item label="客户">
              <label>{{ effectiveFromValue.customerName }}</label>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item :label="$tt('label_warehouse_product', '仓储产品')" prop="productId">
              <label>{{ effectiveFromValue.productName }}</label>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="客户价卡">
              <label>{{ effectiveFromValue.versionName }}</label>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item :label="$tt('有效期')">

              <div style="display: flex; align-items: center; gap: 4px;">
                <el-date-picker
                    class="no-clear-input-text"
                    v-model="effectiveFromValue.customerVersionPriceStartTime"
                    type="date"
                    placeholder="开始日期"
                    :clearable="false"
                    value-format="timestamp"
                >
                </el-date-picker>

                <span style="color: #606266;">至</span>
                <el-date-picker
                    class="no-clear-input-text"
                    v-model="effectiveFromValue.customerVersionPriceEndTime"
                    type="date"
                    placeholder="开始日期"
                    :clearable="false"
                    value-format="timestamp"
                >
                </el-date-picker>
              </div>
            </el-form-item>
          </el-col>
        </el-row>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button icon="el-icon" @click="effectiveDialogVisible = false"> 取消</el-button>
        <el-button type="primary" @click="sumbitEffectForm">保存</el-button>
      </div>
    </el-dialog>

    <el-dialog title="操作日志"
               :visible.sync="logDialogVisible"
               width="600px">
      <ex-table-auto

          ref="tableAuto"
          :url="logQueryUrl"
          style="width: 100%; margin-top: 10px; margin-bottom: 12px;" height="400px"
          autoFill
          autoPage
          border
      >
        <el-table-column prop="gmtCreate" label="操作时间" min-width="8">
          <template slot-scope="scope">
            {{ $dateFormat(scope.row.gmtCreate) }}
          </template>
        </el-table-column>
        <el-table-column prop="creator" min-width="8" label="操作人"></el-table-column>
        <el-table-column prop="logType" min-width="8" label="操作类型">
          <template slot-scope="scope">
            {{
              scope.row.logType == 'EFFECTIVE_DATE' ? '有效期设置' : scope.row.logType == 'STATUS' ? '状态设置' : scope.row.logType == 'CREATE' ? '创建' : scope.row.logType == 'UPDATE' ? '更新' : scope.row.logType == 'DELETE' ? '删除' : ''
            }}
          </template>
        </el-table-column>
      </ex-table-auto>
    </el-dialog>

  </div>


</template>


<script>
import business_function from "@/common/business_function"

import pms_customer_warehouse_price_version from "@/component/pms/pms_customer_warehouse_price_version.vue";
import superTablePageFunction from "@/mixin/super-table-page-function";
import emitOnFunction from "@/mixin/emit-on-function";

let emitKey = 'pms>customer_warehouse_version_price';

export default {
  title: '客户仓储价卡管理',
  name: "customer_warehouse_version_price",
  components: {pms_customer_warehouse_price_version},
  mixins: [superTablePageFunction, emitOnFunction(emitKey),],
  data() {
    return {
      logQueryUrl: '',
      effectiveFromValue: {},
      effectiveDialogVisible: false,
      logDialogVisible: false,
      selection: [],
      option: {
        //搜索框内容
        search: {
          //搜索框内容，key为搜索字段，label为标签提示
          model: [
            {
              label: "label_customer",
              key: "customerId",
              type: 'common_customer_choose',
              attrs: {multiple: false,},
              inputStyle: {'width': '200px'},
            },
            {
              label: "客户价卡状态", key: "status", type: 'select', enum: 'IsAvailableStatusEnum',
            },
            {
              label: "关键字", key: "keyword"
            },
            {
              label: "创建时间",
              key: "createTimeStart",
              type: 'date-picker',
              attrs: {type: "datetime"},
            },
            {
              label: "-",
              key: "createTimeEnd",
              type: 'date-picker',
              attrs: {type: "datetime"},
            },
            {
              label: "有效期",
              key: "effectiveTimeStart",
              type: 'date-picker',
              attrs: {type: "date"},
            },
            {
              label: "-",
              key: "effectiveTimeEnd",
              type: 'date-picker',
              attrs: {type: "date"},
            },
          ],
        },
        action: [
          {
            label: '新增', attrs: {icon: "el-icon-plus"},
            auth:'pms_customer_warehouse_version_price_edit',
            click: () => this.add()
          },
          {
            label: '导出',
            auth:'pms_customer_warehouse_version_price_export',

            click: this.exportExcel
          }

        ],

        table: {
          url: '/fms-api/product/PmsWarehouseProductPermissionRpc/selectCustomerPricePage.json',
          attrs: {},
          model: [
            {type: 'selection', clickToggle: true},

            {key: 'customerName', label: '客户名称', align: 'left'},
            {key: 'customerCode', label: '客户编码', align: 'left'},

            {key: 'productName', label: '产品信息', align: 'left', minWidth: 200,
              render: (h, params) => {
                return h('div', [
                  h('span', {}, params.row.productName),
                  // h('span', params.row.productCode ? ' [' + params.row.productCode + ']' : ''),
                  h('span', {
                    style: {
                      color: params.row.productStatus === 'ENABLE' ? '#67C23A' : '#f56c6c',
                      fontSize: '14px',
                      fontWeight: 'bold',
                      float: 'right'
                    }
                  }, ' [' +   this.$enumShow(params.row.productStatus, "IsAvailableStatusEnum") + ']' ),
                ])
              }
            },
            {key: 'versionName', label: '价卡名称', align: 'left'},
            {
              key: 'status', label: '价卡状态', align: 'left',
              formatter: (r, c, v, i) => this.$enumShow(v, "IsAvailableStatusEnum")
            },
            {
              key: 'customerVersionPriceStartTime', label: '有效期', attrs: {
                formatter: (r, c, v, i) => {
                  if (r.customerVersionPriceStartTime) {
                    return this.$dateFormatDate(r.customerVersionPriceStartTime) + " ~ " + this.$dateFormatDate(r.customerVersionPriceEndTime)
                  }
                }
              }
            },
            {key: 'creator', label: '创建人',},
            {key: 'gmtCreate', label: 'label_create_time', attrs: {formatter: (r, c, v, i) => this.$dateFormat(v)},},
            {key: 'modifier', label: '更新人',},

            {key: 'gmtModify', label: 'label_modify_time', attrs: {formatter: (r, c, v, i) => this.$dateFormat(v)},},
            {
              type: 'operate', width: 160, operate: [
                {
                  label: 'label_view_detail', click: (row) => {
                    this.detail(row)
                  }
                },
                {
                  type: 'more',
                  items: [
                    {
                      label: "有效期设置",
            auth:'pms_customer_warehouse_version_price_edit',

                      click: (row) => {

                        this.effectiveFromValue = _.cloneDeep(row)
                        this.effectiveDialogVisible = true
                      }
                    },
                    {
                      label: "启用",
            auth:'pms_customer_warehouse_version_price_disable',

                      click: (row) => {
                        this.updateStatus(row)
                      },
                      if: (row) => {
                        return row.status === 'DISABLED'
                      },
                    },
                    {
                      label: "禁用",
            auth:'pms_customer_warehouse_version_price_disable',

                      click: (row) => {
                        this.updateStatus(row)
                      },
                      if: (row) => {
                        return row.status === 'ENABLE'
                      },
                    },
                    {
                      label: "日志查看", click: (row) => {
                        this.operateLog(row)
                      }
                    },
                  ],
                }
              ],
            }
          ]

        }
      }
    }
  },
  watch: {
    'effectiveDialogVisible'(val, old) {
      if (!val) {
        this.effectiveFromValue = {}
      }
    }
  },
  methods: {

    operateLog(row) {

      this.logQueryUrl = '/fms-api/product/PmsWarehouseProductPermissionRpc/selectLog.json?versionId=' + row.versionId + '&customerId=' + row.customerId
      this.logDialogVisible = true

    },

    sumbitEffectForm() {

      if (this.effectiveFromValue.customerVersionPriceStartTime && this.effectiveFromValue.customerVersionPriceEndTime) {
        if (this.effectiveFromValue.customerVersionPriceStartTime >= this.effectiveFromValue.customerVersionPriceEndTime) {
          this.$message.warning(this.$tt("label_pms_effective_time_setting_warning_tip"))
          return
        }
      }

      this.$ajax({
        url: '/fms-api/product/PmsWarehouseProductPermissionRpc/updatePermission.json',
        type: 'json',
        data: {
          update: this.effectiveFromValue,
          logType: 'EFFECTIVE_DATE'
        },
        success: (res) => {
          this.$message.success('操作成功')
          this.$refs['SuperTablePage'].reload()
          this.effectiveDialogVisible = false
        }
      })
    },

    updateStatus(row) {
      if (row.status == 'ENABLE') {
        row.status = 'DISABLED'
      } else if (row.status == 'DISABLED') {
        row.status = 'ENABLE'
      }

      this.$ajax({
        url: '/fms-api/product/PmsWarehouseProductPermissionRpc/updatePermission.json',
        type: 'json',
        data: {
          update: row,
          logType: 'STATUS'
        },
        success: (res) => {
          this.$message.success('操作成功')
          this.$refs['SuperTablePage'].reload()
        }
      })
    },

    detail(row) {
      this.$router.push({
        path: '/page/pms/warehouse_product_edit_customer',
        query: {'pid': row.productId, 'vid': row.versionId, 'editType': false}
      })
    },
    add() {
      this.$refs['pmsWarehousePriceDialog'].show()
    },
    exportExcel() {
      const searchParams = this.$refs.SuperTablePage.getSearchFormData()
      business_function.confirmOperateBaseSelectOrForm.call(this, {
        data: searchParams,
        model: this.option.search.model,
        callback: (selection, data) => {
          let params = data
          this.$functionCommon({
            url: "/fms-api/product/PmsWarehouseProductPermissionRpc/export.json",
            data: params,type:'form'
          })
        }
      })
    }

  }

}
</script>


<style>

</style>
